<template>
	<div id="dyBox" class="el-steps el-steps--simple">
		<div  class="el-step is-simple"  style="" v-for="(item,index) in dataList" :key="index"  @click="activeFn(index)" :class="index<=historyLargest?'':'noHover'">
			<div class="el-step__head " :class="active == index?'is-process':'is-wait' ">
				<div class="el-step__line" ><i class="el-step__line-inner" style="transition-delay: 0ms; border-width: 0px; width: 0%;"></i></div>
				<div class="el-step__icon is-icon"><i class="el-step__icon-inner " :class="item.icon"></i></div>
			</div>
			<div class="el-step__main" >
				<div class="el-step__title " :class="active == index?'is-process':'is-wait' ">{{item.title}}</div>
				<div class="el-step__arrow"></div>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		props: {
			active:Number,
			//历史最大路径
			historyLargest:Number,
			dataList: Array ,
		},
		data() {
			return {
				
			};
		},
		methods: {
			activeFn(index) {
				this.$emit('activeFn', index);
			}
		},
	}
</script>

<style>
	#dyBox  .el-step.is-simple .el-step__title{
		min-width: 80px;
	}
	
	#dyBox .el-step.is-simple:not(:last-of-type) .el-step__title{
		max-width: none;
		display: inline-block;
		line-height: 30px;
	}
	#dyBox .el-step.is-simple{
		justify-content: center;
		flex: 1;
		border-radius: 4px;
		cursor: pointer;
	}
	
	#dyBox .el-step.is-simple:hover{
		background-color: #e0f0f7;
		box-shadow: 2px 5px 17px #dbdbdb;
	}
	
	#dyBox .el-step.is-simple:hover .el-step__title.is-wait{
		color: #528afb;
		font-size: 18px;
		transition: 0.1s all;
	}
	#dyBox .el-step.is-simple:hover .el-step__icon-inner{
		color: #528afb;
	}
	
	#dyBox .el-step.is-simple.noHover:hover{
		background-color: #F5F7FA;
		box-shadow: 0px 0px 0px #dbdbdb;
	}
	#dyBox .el-step.is-simple.noHover:hover .el-step__title.is-wait{
		color: #C0C4CC;
		font-size: 16px;
		transition: 0.1s all;
	}
	#dyBox .el-step.is-simple.noHover:hover .el-step__icon-inner{
		color: #C0C4CC;
	}

	
	
	#dyBox .el-step.is-simple .el-step__main{
		flex-grow: 0;
	}
	#dyBox .el-step.is-simple .el-step__arrow{
		flex-grow: 0;
		width: 60px;
		height: 30px;
	}
	#dyBox .el-step__main{
		
	}
</style>
